<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq的动画</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
    #panel,
    #flip {
        padding: 5px;
        text-align: center;
        background-color: #e5eecc;
        border: solid 1px #c3c3c3;
    }

    #panel {
        padding: 50px;
        display: none;
    }
</style>

<body>
    <!-- <button>点击开始动画</button>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
        hello
    </div> -->
    <hr>
    <button  id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div>

    

    <hr>
    <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止动画，但完成动作</button>
    <p>点击 "开始" 按钮开始动画。</p>
    <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
    <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
    <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p> 

    

    <hr>

    <p id="p1">学好jquery</p>
    <button>按钮</button>

    <script>
        /* // animate({params},speed,callback)
        $(function(){
            $('button').click(function(){
                $('div').animate({
                    left:'300px',
                    opacity:'0.5',
                    height:'300px',
                    width:'100px'
                })
            })
        }) */

        /* // 使用相对值
        $(function () {
            $('button').click(function () {
                $('div').animate({
                    left: '200px',
                    height: '+=100px',
                    width: '+=100px'
                })
            })

        }) */

        /* // 使用预定义的值
        $(function () {
            $('button').click(function () {
                $("div").animate({
                    height:'toggle' // toggle｜show｜hide
                })
            })

        }) */

        /* // 多个队列,使用动画队列,依次执行多个动画
        $(function(){
            $('button').click(function(){
                var div = $('div')
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
            })
        }) */

        /* $(function(){
            $('button').click(function(){
                $('div').animate({
                    left:'200px',
                    fontSize:'30px'
                })
            })
        }) */


       /*  // stop:对动画进行停止
       $(function () {
            $('#flip').click(function () {
                $("#panel").slideDown(5000)
            })

            $('#stop').click(function () {
                $("#panel").stop()
            })
        }) */

        /* // stop(stopAll,goToEnd) stopAll:仅停止活动的动画,允许任何排入队列的动画向后执行，goToEnd:立即完成当前动画,默认都为false
        $(function(){
            $("#start").click(function(){
                $("div").animate({left:'100px'},5000);
                $("div").animate({fontSize:'3em'},5000);
            });
            
            $("#stop").click(function(){
                $("div").stop();
            });

            $("#stop2").click(function(){
                $("div").stop(true);
            });

            $("#stop3").click(function(){
                $("div").stop(true,true);
            });
        }) */

        // jquery的链式写法

        $(function(){
            $('button').click(function(){
                $("#p1").css('color','red').slideUp(2000).slideDown(2000)
            })
        })



    </script>
</body>

</html>